<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交投票中心 - 发现热门话题</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* 基础样式 */
        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }
        
        /* 导航栏样式 */
        .navbar {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        .logo {
            font-weight: 700;
            font-size: 1.5rem;
            color: #3b7ddd;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .logo i {
            font-size: 1.75rem;
        }
        
        .nav-link {
            color: #666;
            font-weight: 500;
            margin: 0 0.5rem;
            transition: all 0.2s ease;
        }
        
        .nav-link:hover, .nav-link.active {
            color: #3b7ddd;
        }
        
        .user-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        /* 主内容区 */
        .main-container {
            padding: 2rem 0;
        }
        
        /* 页面标题区 */
        .page-header {
            margin-bottom: 2rem;
        }
        
        .page-title {
            font-size: 1.8rem;
            font-weight: 700;
            color: #2d3436;
        }
        
        .page-description {
            color: #636e72;
            max-width: 800px;
        }
        
        /* 筛选区样式 */
        .filters-container {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        .filter-section {
            margin-bottom: 1rem;
        }
        
        .filter-title {
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: #2d3436;
        }
        
        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }
        
        .filter-tag {
            background-color: #f1f5f9;
            border: 1px solid #e2e8f0;
            border-radius: 20px;
            padding: 0.35rem 1rem;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .filter-tag:hover {
            background-color: #e2e8f0;
        }
        
        .filter-tag.active {
            background-color: #3b7ddd;
            color: white;
            border-color: #3b7ddd;
        }
        
        .search-container {
            position: relative;
        }
        
        .search-container input {
            padding-left: 2.5rem;
        }
        
        .search-container i {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
        }
        
        .filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid #f1f5f9;
        }
        
        /* 投票列表样式 */
        .voting-list {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }
        
        .vote-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        .vote-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .vote-header {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid #f1f5f9;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .vote-creator {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .creator-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .creator-info {
            line-height: 1.3;
        }
        
        .creator-name {
            font-weight: 600;
            font-size: 0.95rem;
        }
        
        .vote-time {
            font-size: 0.8rem;
            color: #94a3b8;
        }
        
        .vote-category {
            display: inline-block;
            font-size: 0.8rem;
            padding: 0.2rem 0.6rem;
            border-radius: 4px;
            background-color: #eef2ff;
            color: #3b7ddd;
        }
        
        .vote-content {
            padding: 1.25rem;
        }
        
        .vote-title {
            font-weight: 600;
            font-size: 1.25rem;
            margin-bottom: 1rem;
            color: #2d3436;
        }
        
        .vote-options {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            margin-bottom: 1.25rem;
        }
        
        .vote-option {
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 1rem;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
        }
        
        .vote-option:hover {
            border-color: #3b7ddd;
            background-color: #f8fafc;
        }
        
        .vote-option.selected {
            border-color: #3b7ddd;
            background-color: #f0f7ff;
        }
        
        .option-text {
            position: relative;
            z-index: 2;
        }
        
        .option-votes {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.75rem;
            font-size: 0.9rem;
            position: relative;
            z-index: 2;
        }
        
        .votes-count {
            font-weight: 600;
            color: #3b7ddd;
        }
        
        .votes-percentage {
            color: #636e72;
        }
        
        .progress-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 4px;
            background-color: #3b7ddd;
            transition: width 0.5s ease;
            z-index: 1;
        }
        
        .vote-stats {
            display: flex;
            justify-content: space-between;
            padding: 0 1.25rem 1rem;
            font-size: 0.9rem;
            color: #636e72;
        }
        
        .vote-stat {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        
        .vote-actions {
            display: flex;
            gap: 1rem;
            padding: 0.75rem 1.25rem;
            border-top: 1px solid #f1f5f9;
            background-color: #f8fafc;
        }
        
        .vote-action {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            color: #636e72;
            font-size: 0.9rem;
            cursor: pointer;
            transition: color 0.2s ease;
        }
        
        .vote-action:hover {
            color: #3b7ddd;
        }
        
        .vote-action.active {
            color: #3b7ddd;
        }
        
        /* 分页样式 */
        .pagination-container {
            display: flex;
            justify-content: center;
            margin-top: 2.5rem;
        }
        
        .page-link {
            color: #3b7ddd;
            border-color: #e2e8f0;
            margin: 0 0.25rem;
            border-radius: 6px;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .page-link:hover {
            background-color: #f1f5f9;
            border-color: #e2e8f0;
            color: #3b7ddd;
        }
        
        .page-link.active {
            background-color: #3b7ddd;
            border-color: #3b7ddd;
            color: white;
        }
        
        /* 创建投票按钮 */
        .create-vote-btn {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: #3b7ddd;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            box-shadow: 0 4px 12px rgba(59, 125, 221, 0.3);
            cursor: pointer;
            transition: all 0.2s ease;
            border: none;
        }
        
        .create-vote-btn:hover {
            transform: scale(1.05);
            background-color: #2a6bc7;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .filter-options {
                gap: 0.5rem;
            }
            
            .filter-tag {
                padding: 0.3rem 0.75rem;
                font-size: 0.85rem;
            }
            
            .vote-title {
                font-size: 1.1rem;
            }
            
            .vote-actions {
                flex-wrap: wrap;
            }
        }
        
        @media (max-width: 576px) {
            .page-title {
                font-size: 1.5rem;
            }
            
            .filter-section {
                margin-bottom: 0.75rem;
            }
            
            .vote-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }
            
            .vote-stats {
                flex-direction: column;
                gap: 0.5rem;
            }
            
            .create-vote-btn {
                width: 50px;
                height: 50px;
                font-size: 1.25rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg py-3">
        <div class="container">
            <a href="#" class="logo">
                <i class="fas fa-comments"></i>
                <span>社交投票</span>
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <i class="fas fa-bars"></i>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">投票</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">话题</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">排行榜</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">发现</a>
                    </li>
                </ul>
                
                <div class="d-flex align-items-center gap-3">
                    <button class="btn btn-sm btn-outline-primary">
                        <i class="fas fa-plus me-1"></i> 创建投票
                    </button>
                    <img src="https://picsum.photos/id/1005/38/38" alt="用户头像" class="user-avatar">
                </div>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="main-container">
        <div class="container">
            <!-- 页面标题 -->
            <div class="page-header">
                <h1 class="page-title">热门投票</h1>
                <p class="page-description">
                    参与社区投票，表达你的观点，发现大家对各种话题的看法和态度。从日常生活到社会热点，这里有丰富多样的投票等你来参与。
                </p>
            </div>
            
            <!-- 筛选区 -->
            <div class="filters-container">
                <div class="row">
                    <div class="col-md-8">
                        <div class="filter-section">
                            <h3 class="filter-title">投票类别</h3>
                            <div class="filter-options">
                                <div class="filter-tag active" data-filter="category" data-value="all">全部类别</div>
                                <div class="filter-tag" data-filter="category" data-value="technology">科技</div>
                                <div class="filter-tag" data-filter="category" data-value="entertainment">娱乐</div>
                                <div class="filter-tag" data-filter="category" data-value="sports">体育</div>
                                <div class="filter-tag" data-filter="category" data-value="politics">时政</div>
                                <div class="filter-tag" data-filter="category" data-value="lifestyle">生活</div>
                                <div class="filter-tag" data-filter="category" data-value="education">教育</div>
                                <div class="filter-tag" data-filter="category" data-value="business">商业</div>
                            </div>
                        </div>
                        
                        <div class="filter-section">
                            <h3 class="filter-title">投票状态</h3>
                            <div class="filter-options">
                                <div class="filter-tag active" data-filter="status" data-value="all">全部状态</div>
                                <div class="filter-tag" data-filter="status" data-value="active">进行中</div>
                                <div class="filter-tag" data-filter="status" data-value="closed">已结束</div>
                            </div>
                        </div>
                        
                        <div class="filter-section">
                            <h3 class="filter-title">排序方式</h3>
                            <div class="filter-options">
                                <div class="filter-tag active" data-filter="sort" data-value="popular">热门优先</div>
                                <div class="filter-tag" data-filter="sort" data-value="latest">最新发布</div>
                                <div class="filter-tag" data-filter="sort" data-value="closing">即将结束</div>
                                <div class="filter-tag" data-filter="sort" data-value="participants">参与人数</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="filter-section">
                            <h3 class="filter-title">搜索投票</h3>
                            <div class="search-container">
                                <i class="fas fa-search"></i>
                                <input type="text" class="form-control" placeholder="输入关键词搜索投票...">
                            </div>
                        </div>
                        
                        <div class="filter-section">
                            <h3 class="filter-title">时间范围</h3>
                            <select class="form-select">
                                <option value="all">所有时间</option>
                                <option value="today">今天</option>
                                <option value="week">本周</option>
                                <option value="month">本月</option>
                                <option value="quarter">近三个月</option>
                                <option value="year">今年</option>
                            </select>
                        </div>
                        
                        <div class="filter-section">
                            <h3 class="filter-title">参与情况</h3>
                            <div class="filter-options">
                                <div class="filter-tag active" data-filter="participation" data-value="all">全部</div>
                                <div class="filter-tag" data-filter="participation" data-value="joined">我已参与</div>
                                <div class="filter-tag" data-filter="participation" data-value="notjoined">我未参与</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="filter-actions">
                    <button class="btn btn-outline-secondary">重置筛选</button>
                    <button class="btn btn-primary">应用筛选</button>
                </div>
            </div>
            
            <!-- 投票列表 -->
            <div class="voting-list">
                <!-- 投票1 -->
                <div class="vote-card" data-category="technology" data-status="active">
                    <div class="vote-header">
                        <div class="vote-creator">
                            <img src="https://picsum.photos/id/1012/40/40" alt="用户头像" class="creator-avatar">
                            <div class="creator-info">
                                <div class="creator-name">科技达人</div>
                                <div class="vote-time">2小时前发布</div>
                            </div>
                        </div>
                        <span class="vote-category">科技</span>
                    </div>
                    
                    <div class="vote-content">
                        <h3 class="vote-title">你更看好哪种AI技术的未来发展？</h3>
                        
                        <div class="vote-options">
                            <div class="vote-option" data-option="1">
                                <div class="option-text">大语言模型（如GPT系列）</div>
                                <div class="option-votes">
                                    <span class="votes-count">2,541 票</span>
                                    <span class="votes-percentage">42%</span>
                                </div>
                                <div class="progress-bar" style="width: 42%;"></div>
                            </div>
                            
                            <div class="vote-option" data-option="2">
                                <div class="option-text">计算机视觉（图像/视频处理）</div>
                                <div class="option-votes">
                                    <span class="votes-count">1,836 票</span>
                                    <span class="votes-percentage">30%</span>
                                </div>
                                <div class="progress-bar" style="width: 30%;"></div>
                            </div>
                            
                            <div class="vote-option" data-option="3">
                                <div class="option-text">自主智能体（如机器人）</div>
                                <div class="option-votes">
                                    <span class="votes-count">1,198 票</span>
                                    <span class="votes-percentage">20%</span>
                                </div>
                                <div class="progress-bar" style="width: 20%;"></div>
                            </div>
                            
                            <div class="vote-option" data-option="4">
                                <div class="option-text">其他AI技术</div>
                                <div class="option-votes">
                                    <span class="votes-count">481 票</span>
                                    <span class="votes-percentage">8%</span>
                                </div>
                                <div class="progress-bar" style="width: 8%;"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="vote-stats">
                        <div class="vote-stat">
                            <i class="fas fa-users"></i>
                            <span>6,056 人参与</span>
                        </div>
                        <div class="vote-stat">
                            <i class="fas fa-comment"></i>
                            <span>328 条评论</span>
                        </div>
                        <div class="vote-stat">
                            <i class="fas fa-clock"></i>
                            <span>还剩 2 天 18 小时</span>
                        </div>
                    </div>
                    
                    <div class="vote-actions">
                        <div class="vote-action">
                            <i class="fas fa-share-alt"></i>
                            <span>分享</span>
                        </div>
                        <div class="vote-action">
                            <i class="fas fa-comment"></i>
                            <span>评论</span>
                        </div>
                        <div class="vote-action">
                            <i class="fas fa-bookmark"></i>
                            <span>收藏</span>
                        </div>
                    </div>
                </div>
                
                <!-- 投票2 -->
                <div class="vote-card" data-category="lifestyle" data-status="active">
                    <div class="vote-header">
                        <div class="vote-creator">
                            <img src="https://picsum.photos/id/1027/40/40" alt="用户头像" class="creator-avatar">
                            <div class="creator-info">
                                <div class="creator-name">生活家</div>
                                <div class="vote-time">昨天 15:30 发布</div>
                            </div>
                        </div>
                        <span class="vote-category">生活</span>
                    </div>
                    
                    <div class="vote-content">
                        <h3 class="vote-title">周末你更喜欢哪种放松方式？</h3>
                        
                        <div class="vote-options">
                            <div class="vote-option" data-option="1">
                                <div class="option-text">宅家休息，看电影或看书</div>
                                <div class="option-votes">
                                    <span class="votes-count">3,245 票</span>
                                    <span class="votes-percentage">45%</span>
                                </div>
                                <div class="progress-bar" style="width: 45%;"></div>
                            </div>
                            
                            <div class="vote-option" data-option="2">
                                <div class="option-text">外出运动，如爬山、跑步</div>
                                <div class="option-votes">
                                    <span class="votes-count">1,512 票</span>
                                    <span class="votes-percentage">21%</span>
                                </div>
                                <div class="progress-bar" style="width: 21%;"></div>
                            </div>
                            
                            <div class="vote-option" data-option="3">
                                <div class="option-text">和朋友聚会，聚餐或游玩</div>
                                <div class="option-votes">
                                    <span class="votes-count">1,823 票</span>
                                    <span class="votes-percentage">25%</span>
                                </div>
                                <div class="progress-bar" style="width: 25%;"></div>
                            </div>
                            
                            <div class="vote-option" data-option="4">
                                <div class="option-text">学习新技能或参加兴趣班</div>
                                <div class="option-votes">
                                    <span class="votes-count">637 票</span>
                                    <span class="votes-percentage">9%</span>
                                </div>
                                <div class="progress-bar" style="width: 9%;"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="vote-stats">
                        <div class="vote-stat">
                            <i class="fas fa-users"></i>
                            <span>7,217 人参与</span>
                        </div>
                        <div class="vote-stat">
                            <i class="fas fa-comment"></i>
                            <span>456 条评论</span>
                        </div>
                        <div class="vote-stat">
                            <i class="fas fa-clock"></i>
                            <span>还剩 1 天 5 小时</span>
                        </div>
                    </div>
                    
                    <div class="vote-actions">
                        <div class="vote-action">
                            <i class="fas fa-share-alt"></i>
                            <span>分享</span>
                        </div>
                        <div class="vote-action">
                            <i class="fas fa-comment"></i>
                            <span>评论</span>
                        </div>
                        <div class="vote-action active">
                            <i class="fas fa-bookmark"></i>
                            <span>已收藏</span>
                        </div>
                    </div>
                </div>
                
                <!-- 投票3 -->
                <div class="vote-card" data-category="sports" data-status="closed">
                    <div class="vote-header">
                        <div class="vote-creator">
                            <img src="https://picsum.photos/id/1074/40/40" alt="用户头像" class="creator-avatar">
                            <div class="creator-info">
                                <div class="creator-name">体育迷</div>
                                <div class="vote-time">3天前发布</div>
                            </div>
                        </div>
                        <span class="vote-category">体育</span>
                    </div>
                    
                    <div class="vote-content">
                        <h3 class="vote-title">你认为哪支球队会获得本赛季冠军？</h3>
                        
                        <div class="vote-options">
                            <div class="vote-option selected" data-option="1">
                                <div class="option-text">红队</div>
                                <div class="option-votes">
                                    <span class="votes-count">5,678 票</span>
                                    <span class="votes-percentage">52%</span>
                                </div>
                                <div class="progress-bar" style="width: 52%;"></div>
                            </div>
                            
                            <div class="vote-option" data-option="2">
                                <div class="option-text">蓝队</div>
                                <div class="option-votes">
                                    <span class="votes-count">3,245 票</span>
                                    <span class="votes-percentage">30%</span>
                                </div>
                                <div class="progress-bar" style="width: 30%;"></div>
                            </div>
                            
                            <div class="vote-option" data-option="3">
                                <div class="option-text">黄队</div>
                                <div class="option-votes">
                                    <span class="votes-count">1,956 票</span>
                                    <span class="votes-percentage">18%</span>
                                </div>
                                <div class="progress-bar" style="width: 18%;"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="vote-stats">
                        <div class="vote-stat">
                            <i class="fas fa-users"></i>
                            <span>10,879 人参与</span>
                        </div>
                        <div class="vote-stat">
                            <i class="fas fa-comment"></i>
                            <span>1,254 条评论</span>
                        </div>
                        <div class="vote-stat">
                            <i class="fas fa-check-circle text-success"></i>
                            <span>已结束 · 红队获胜</span>
                        </div>
                    </div>
                    
                    <div class="vote-actions">
                        <div class="vote-action">
                            <i class="fas fa-share-alt"></i>
                            <span>分享</span>
                        </div>
                        <div class="vote-action">
                            <i class="fas fa-comment"></i>
                            <span>评论</span>
                        </div>
                        <div class="vote-action">
                            <i class="fas fa-bookmark"></i>
                            <span>收藏</span>
                        </div>
                    </div>
                </div>
                
                <!-- 投票4 -->
                <div class="vote-card" data-category="entertainment" data-status="active">
                    <div class="vote-header">
                        <div class="vote-creator">
                            <img src="https://picsum.photos/id/1062/40/40" alt="用户头像" class="creator-avatar">
                            <div class="creator-info">
                                <div class="creator-name">影视爱好者</div>
                                <div class="vote-time">4天前发布</div>
                            </div>
                        </div>
                        <span class="vote-category">娱乐</span>
                    </div>
                    
                    <div class="vote-content">
                        <h3 class="vote-title">你更喜欢哪种类型的电影？</h3>
                        
                        <div class="vote-options">
                            <div class="vote-option" data-option="1">
                                <div class="option-text">科幻片</div>
                                <div class="option-votes">
                                    <span class="votes-count">4,231 票</span>
                                    <span class="votes-percentage">35%</span>
                                </div>
                                <div class="progress-bar" style="width: 35%;"></div>
                            </div>
                            
                            <div class="vote-option" data-option="2">
                                <div class="option-text">剧情片</div>
                                <div class="option-votes">
                                    <span class="votes-count">3,567 票</span>
                                    <span class="votes-percentage">30%</span>
                                </div>
                                <div class="progress-bar" style="width: 30%;"></div>
                            </div>
                            
                            <div class="vote-option" data-option="3">
                                <div class="vote-option" data-option="3">
                                    <div class="option-text">喜剧片</div>
                                    <div class="option-votes">
                                        <span class="votes-count">2,145 票</span>
                                        <span class="votes-percentage">18%</span>
                                    </div>
                                    <div class="progress-bar" style="width: 18%;"></div>
                                </div>
                            </div>
                            
                            <div class="vote-option" data-option="4">
                                <div class="option-text">动作片</div>
                                <div class="option-votes">
                                    <span class="votes-count">2,002 票</span>
                                    <span class="votes-percentage">17%</span>
                                </div>
                                <div class="progress-bar" style="width: 17%;"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="vote-stats">
                        <div class="vote-stat">
                            <i class="fas fa-users"></i>
                            <span>11,945 人参与</span>
                        </div>
                        <div class="vote-stat">
                            <i class="fas fa-comment"></i>
                            <span>876 条评论</span>
                        </div>
                        <div class="vote-stat">
                            <i class="fas fa-clock"></i>
                            <span>还剩 4 天 10 小时</span>
                        </div>
                    </div>
                    
                    <div class="vote-actions">
                        <div class="vote-action">
                            <i class="fas fa-share-alt"></i>
                            <span>分享</span>
                        </div>
                        <div class="vote-action">
                            <i class="fas fa-comment"></i>
                            <span>评论</span>
                        </div>
                        <div class="vote-action active">
                            <i class="fas fa-bookmark"></i>
                            <span>已收藏</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 分页 -->
            <div class="pagination-container">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-label="Previous">
                                <i class="fas fa-chevron-left"></i>
                            </a>
                        </li>
                        <li class="page-item"><a class="page-link active" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">4</a></li>
                        <li class="page-item"><a class="page-link" href="#">5</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#" aria-label="Next">
                                <i class="fas fa-chevron-right"></i>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    
    <!-- 创建投票按钮 -->
    <button class="create-vote-btn">
        <i class="fas fa-plus"></i>
    </button>
    
    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 筛选标签点击事件
            const filterTags = document.querySelectorAll('.filter-tag');
            filterTags.forEach(tag => {
                tag.addEventListener('click', function() {
                    const filterType = this.getAttribute('data-filter');
                    
                    // 移除同类型筛选标签的active类
                    document.querySelectorAll(`.filter-tag[data-filter="${filterType}"]`)
                        .forEach(t => t.classList.remove('active'));
                    
                    // 给当前点击的标签添加active类
                    this.classList.add('active');
                });
            });
            
            // 投票选项点击事件
            const voteOptions = document.querySelectorAll('.vote-option');
            voteOptions.forEach(option => {
                option.addEventListener('click', function() {
                    // 获取父级投票选项容器
                    const optionsContainer = this.closest('.vote-options');
                    
                    // 移除同组其他选项的selected类
                    optionsContainer.querySelectorAll('.vote-option')
                        .forEach(opt => opt.classList.remove('selected'));
                    
                    // 给当前点击的选项添加selected类
                    this.classList.add('selected');
                    
                    // 在实际应用中，这里会有AJAX请求提交投票
                    // 这里仅做UI演示
                });
            });
            
            // 投票操作按钮点击事件
            const voteActions = document.querySelectorAll('.vote-action');
            voteActions.forEach(action => {
                action.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    // 收藏按钮切换状态
                    if (this.querySelector('.fas.fa-bookmark')) {
                        this.classList.toggle('active');
                        const textSpan = this.querySelector('span');
                        if (this.classList.contains('active')) {
                            textSpan.textContent = '已收藏';
                        } else {
                            textSpan.textContent = '收藏';
                        }
                    }
                });
            });
            
            // 分页按钮点击事件
            const pageLinks = document.querySelectorAll('.page-link:not(.disabled)');
            pageLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    if (!this.querySelector('i')) { // 排除箭头按钮
                        document.querySelectorAll('.page-link').forEach(l => {
                            l.classList.remove('active');
                        });
                        this.classList.add('active');
                    }
                });
            });
            
            // 创建投票按钮点击事件
            const createVoteBtn = document.querySelector('.create-vote-btn');
            createVoteBtn.addEventListener('click', function() {
                alert('在实际应用中，这里会打开创建投票的表单');
            });
        });
    </script>
</body>
</html>

